<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
<table border="1">
  <tr>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>商品数量</th>
  </tr>
</table>
<script>
  const arr = [
    {title:'小米手机',price:8888,num:100},
    {title:'华为手机',price:8888,num:200},
    {title:'苹果手机',price:8888,num:300},
    {title:'三星手机',price:8888,num:400},
    {title:'OPPO手机',price:8888,num:500}
  ];
  let table = document.querySelector('table');
  for(let i=0;i<arr.length;i++){
    let trE = document.createElement('tr');
    let titleTd = document.createElement('td');
    let priceTd = document.createElement('td');
    let numTd = document.createElement('td');
    titleTd.innerHTML = arr[i].title;
    priceTd.innerHTML = arr[i].price;
    numTd.innerHTML = arr[i].num;
    trE.append(titleTd,priceTd,numTd);
    table.append(trE);

  }
</script>
</body>
</html>